import React, { memo, useEffect } from 'react';
import  { useDispatch } from 'react-redux';
import { Tabs } from 'antd';

import SongList from '@/components/SongList';
import { getSearchListAction } from './store/actionCreators';

const { TabPane } = Tabs;

function SearchResult() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getSearchListAction({ keywords: "起风了", limit: 100, offset: 0, type: 1 }))
  }, [dispatch]);
  return (
    <div className="search-result">
      <h3 className="title">找到 100 首单曲</h3>
      <div className="tabsList">
      <Tabs defaultActiveKey="1" >
          <TabPane tab="单曲" key="1">
            <SongList />
        </TabPane>
        <TabPane tab="歌手" key="2">
          Content of Tab Pane 2
        </TabPane>
        <TabPane tab="专辑" key="3">
          Content of Tab Pane 3
          </TabPane>
          <TabPane tab="视频" key="4">
          Content of Tab Pane 3
          </TabPane>
          <TabPane tab="歌单" key="5">
          Content of Tab Pane 3
          </TabPane>
          <TabPane tab="歌词" key="6">
          Content of Tab Pane 3
          </TabPane>
          <TabPane tab="播客" key="7">
          Content of Tab Pane 3
          </TabPane>
          <TabPane tab="用户" key="8">
          Content of Tab Pane 3
        </TabPane>
      </Tabs>
      </div>
    </div>
  )
}
export default memo(SearchResult);
